<!--
 * @Author: tian_biao
 * @Date: 2021-08-16 16:10:06
 * @LastEditTime: 2021-08-17 18:33:14
 * @Description: 缺陷详情
-->
<template>
    <article class="bg_4dbfae">
        <!-- 标题-->
        <div class="title-bg">
            <Theader :title="title" :headerStyle="{color:'#333',backgroundColor: '#fff'}" :textStyle="{color:'#333'}"
                :titleStyle="{color:'#333'}">
                <template slot="header_arrow">
                    <van-icon size="17" name="arrow-left"  @click="back"/>
                </template>
                <template slot="header_icon">
                    <van-icon name="edit" color="#0EB295" size="1.5rem" />
                </template>
            </Theader>
        </div>
        <div class="messageBox">
            <van-collapse v-model="activeNames" class="bgcf5f6fa">
                <van-collapse-item class="borderRadius" title="隐患设备" name="1">
                    <div class="deviceBox">
                        <div class="deviceTitle">
                            <div>1#主变</div>
                            <div>主变压器</div>
                        </div>
                        <div class="deviceCon">
                            <div>电压等级：交流500kv</div>
                            <div>设备型号：ZB41420-50</div>
                        </div>
                        <div class="deviceCon">
                            <div>投运日期：2000-08-01</div>
                            <div>生产厂家：江苏电力</div>
                        </div>
                    </div>
                </van-collapse-item>
                <van-collapse-item class="borderRadius mt1rem" title="隐患信息" name="2">
                    <van-field :border="border" readonly input-align="right" label="隐患类型"
                        v-model="addData.substationName" />
                    <van-field :border="border" readonly input-align="right" label="隐患来源"
                        v-model="addData.deviceName" />
                    <van-field :border="border" readonly input-align="right" label="隐患原因"
                        v-model="addData.deviceTypeName" />
                    <van-field :border="border" readonly input-align="right" label="隐患所在单位"
                        v-model="addData.deviceTypeName" />
                    <van-field :border="border" readonly input-align="right" label="行政地理位置"
                        v-model="addData.deviceTypeName" />
                    <div class="descBox mt1rem">
                        <div class="ml1rem">隐患简题</div>
                        <div class="textAreaBox">
                            <van-field :border="border" style="white-space:pre;" class="descField"
                                v-model.trim="addData.defectContent" rows="2" autosize type="textarea" maxlength="256"
                                placeholder="请添加缺陷描述" />
                            <!-- <img class="asr" src="../../images/ly2.png"> -->
                        </div>
                    </div>
                    <van-field :border="border" readonly input-align="right" label="专业分类"
                        v-model="addData.deviceTypeName" />
                    <van-field :border="border" readonly input-align="right" label="详细分类"
                        v-model="addData.deviceTypeName" />
                    <van-field :border="border" readonly input-align="right" label="隐患分类"
                        v-model="addData.deviceTypeName" />
                    <van-field :border="border" readonly input-align="right" label="隐患等级"
                        v-model="addData.deviceTypeName" />
                    <van-field :border="border" readonly input-align="right" label="归属职能部门"
                        v-model="addData.deviceTypeName" />
                    <div class="descBox mt1rem">
                        <div class="ml1rem">隐患描述</div>
                        <div class="textAreaBox">
                            <van-field :border="border" style="white-space:pre;" class="descField"
                                v-model.trim="addData.defectContent" rows="2" autosize type="textarea" maxlength="256"
                                placeholder="请添加缺陷描述" />
                            <!-- <img class="asr" src="../../images/ly2.png"> -->
                        </div>
                    </div>
                    <div class="descBox mt1rem">
                        <div class="ml1rem">可能导致的后果</div>
                        <div class="textAreaBox">
                            <van-field :border="border" style="white-space:pre;" class="descField"
                                v-model.trim="addData.defectContent" rows="2" autosize type="textarea" maxlength="256"
                                placeholder="请添加缺陷描述" />
                            <!-- <img class="asr" src="../../images/ly2.png"> -->
                        </div>
                    </div>

                    <van-field :border="border" readonly input-align="right" label="计划处理日期"
                        v-model="addData.findTime" />
                    <van-field :border="border" readonly input-align="right" label="已采取措施"
                        v-model="addData.deviceTypeName" />
                </van-collapse-item>
                <van-collapse-item class="borderRadius mt1rem" title="附件信息" name="3">
                    <!-- 照片/视频 -->
                    <div class="descBox addfile mt1rem">
                        <div class="ml1rem">照片</div>
                        <!-- <div class="addfileBtn"><img src="../../images/add.png">
                        <div class="addText">添加照片/视频</div> -->
                        <!-- </div> -->
                    </div>
                    <!-- 显示图片和视频 -->
                    <div class="descBox addfile mt1rem">
                        <!-- 视频用缩略图 -->
                        <div class="textAreaBox">
                            <van-image width="80" height="80" lazy-load src="https://img01.yzcdn.cn/vant/cat.jpeg" />
                            <!-- <img class="delImg" src="../../images/del.png"> -->
                        </div>
                    </div>
                    <!-- 照片/视频 -->
                    <div class="descBox addfile mt1rem">
                        <div class="ml1rem">视频</div>
                        <!-- <div class="addfileBtn"><img src="../../images/add.png">
                        <div class="addText">添加照片/视频</div> -->
                        <!-- </div> -->
                    </div>
                    <!-- 显示图片和视频 -->
                    <div class="descBox addfile mt1rem">
                        <!-- 视频用缩略图 -->
                        <div class="textAreaBox">
                            <van-image width="80" height="80" lazy-load src="https://img01.yzcdn.cn/vant/cat.jpeg" />
                            <!-- <img class="delImg" src="../../images/del.png"> -->
                        </div>
                    </div>
                    <!-- 录音 -->
                    <div class="descBox addfile mt1rem">
                        <div class="ml1rem">录音</div>
                        <!-- <div class="addfileBtn"><img src="../../images/ly3.png">
                        <div class="addText">按住录音</div>
                    </div> -->
                    </div>
                    <!-- 显示录音 -->
                    <div class="descBox addfile mt1rem">
                        <div class="textAreaBox">
                            <div class="lyfile">
                                <img src="../../images/ly1.png">
                                <div>60S</div>
                            </div>
                            <!-- <img class="delLy" src="../../images/del.png"> -->
                        </div>
                    </div>
                </van-collapse-item>

            </van-collapse>
            <div class="trackRecord borderRadius mt1rem" @click="trackRecord">
                <div class="trackSon">
                    <div>跟踪记录</div>
                    <van-icon name="arrow" />
                </div>
            </div>
        </div>
    </article>
</template>

<script type="text/javascript">
    import Theader from "../component/header"
    import Utils from '@/utils/util'
    export default {
        name: 'ThiddenDangerDetail',
        components: {
            Theader,
        },
        data() {
            return {
                title: "隐患详情",
                activeNames: ["1", "2"],
                border: false,
                addData: {
                    substationName: "东善桥变",
                    substationId: "",
                    deviceName: "1号主变A相",
                    deviceId: "",
                    deviceTypeName: "主变压器",
                    deviceTypeId: "",
                    attachmentList: [],//附件
                    auditorList: [],// 文件名
                    classificationStandard: "",// 分类依据id
                    classificationStandardText: "风扇风页碰壳、脱落、破损或风声异常",// 分类依据text
                    defectContent: "一号主变压器风扇故障",// 缺陷内容
                    defectDesc: "",// 缺陷描述
                    remark: "",// 备注
                    defectDescText: "",// 缺陷描述
                    defectId: "",// 缺陷id
                    defectNature: "",// 缺陷性质
                    defectNatureText: "",// 缺陷性质
                    defectPosition: "",// 缺陷部位
                    defectPositionText: "",// 缺陷部位
                    findTime: "2021/07/07 18:30:00",// 发现人时间
                    findWay: "人工巡视",// 发现方式
                    findUserId: "",// 发现人id
                    findUserName: "王染",// 发现人名字
                    inspectTaskId: "",// 检修任务id
                    roleCode: "",
                    substationRfid: "010020000000000025287847",// 变电站rfid
                    userId: "",// 登录人id
                }
            }
        },

        computed: {

        },

        methods: {
            
            back(){
                this.$router.go(-1)
            },
            /**
             * @description: 跟踪记录
             * @param {*}
             * @return {*}
             */
            trackRecord() {
                this.$router.push({
                    name: "trackRecord",
                    query: {
                        params: ""
                    }
                })
            }
        },

        watch: {
        },
        mounted() {
        },
        created() {
        },

    }
</script>

<style scoped>
    article {
        display: flex;
        flex-direction: column;
        height: 100vh;
    }

    .bg_4dbfae {
        background: #f5f6fa !important;
    }

    .title-bg {
        height: 50px;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #fff;
    }

    .bgcf5f6fa {
        width: 95%;
        margin: 0 auto;
        background-color: #f5f6fa !important;
    }

    .jg {
        margin-top: 1rem !important;
        border-radius: 4px !important;
    }

    .radius {
        border-radius: 4px !important;
    }

    .ml1rem {
        margin-left: 1rem;
    }

    .mt1rem {
        margin-top: 1rem !important;
    }

    .flexRow {
        display: flex;
        /* justify-content: center; */
        align-items: center;
    }

    .descBox .descField {
        /* border: 1px solid #eee; */
        margin-top: 10px;

    }

    .addfile {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .addfileBtn {
        display: flex;
    }

    .addfileBtn>img {
        width: 1rem;
        height: 1rem;
    }

    .addfileBtn>div {
        margin-left: 0.2rem;
        line-height: 1rem;
    }

    .textAreaBox {
        position: relative;
    }

    .asr {
        width: 1rem;
        height: 1rem;
        position: absolute;
        bottom: 10%;
        right: 2%;
    }

    .lyfile {
        width: 12rem;
        height: 2rem;
        border-radius: 4px;
        background: #99DDD1;
        color: #fff;
        display: flex;
        align-items: center;
    }

    .lyfile>img {
        width: 1.5rem;
        height: 1.5rem;
        margin-left: 1rem;
    }

    .lyfile>div {
        margin-left: 1rem;
        color: #0EB295;
        font-family: Source Han Sans CN;
        font-weight: regular;
        font-size: 13px;
        line-height: normal;
        letter-spacing: 0px;
        text-align: left;
    }

    .delLy {
        width: 1rem;
        height: 1rem;
        position: absolute;
        top: -20%;
        right: -3%;
    }

    .messageBox {
        height: 90%;
        overflow-y: auto;
        margin-top: 1rem !important;
    }

    .trackRecord {
        width: 95%;
        margin: 0 auto;
        height: 2.5rem;
        background-color: #fff;
    }

    .trackSon {
        width: 94%;
        margin: 0 auto;
        height: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #333;
        font-size: 14px;
    }

    .van-collapse-item {
        border: 1px solid #0EB295;
    }
    .borderRadius{
        border-radius: 4px !important;
    }
    .deviceBox{
        width: 100%;

    }
    .deviceTitle{
        width: 100%;
        display: flex;
        justify-content: space-between;
        color: #000;
        font-size: 1.1rem;
        font-weight: 500;
    }
    .deviceCon{
        
        width: 100%;
        display: flex;
        justify-content: space-between;
    }
</style>